<!-- src/components/log/LogSearchResults.vue -->
<template>
  <el-card class="results-card">
    <template #header>
      <div class="card-header">
        <div>
          <el-icon><List /></el-icon>
          <span class="header-text">日志列表</span>
        </div>
        <div>
          <el-tag type="info">共 {{ total }} 条记录</el-tag>
        </div>
      </div>
    </template>

    <el-table
      v-loading="loading"
      :data="data"
      style="width: 100%"
      stripe
      highlight-current-row
    >
      <el-table-column prop="timestamp" label="日志时间" width="180" />
      <el-table-column prop="level" label="级别" width="100">
        <template #default="{ row }">
          <el-tag :type="getLevelTagType(row.level)" effect="light">
            {{ row.level }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        v-if="showOriginLogLevel"
        prop="originLevel"
        label="原始级别"
        width="100"
      >
        <template #default="{ row }">
          <el-tag :type="getLevelTagType(row.originLevel)" effect="light">
            {{ row.originLevel }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" width="120" />
      <!-- el-table-column prop="sourceIp" label="源IP" width="150" / -->
      <!-- el-table-column prop="targetIp" label="目标IP" width="150" / -->
      <el-table-column prop="agentIp" label="日志IP" width="150" />
      <el-table-column prop="message" label="关键信息" />
      <el-table-column label="操作" width="120" align="center">
        <template #default="{ row }">
          <el-button type="primary" link size="small" @click="viewDetails(row)">
            <el-icon><View /></el-icon>
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <div class="card-footer">
        <div>
          <span class="text-muted"
            >显示 {{ (currentPage - 1) * pageSize + 1 }}-{{
              Math.min(currentPage * pageSize, total)
            }}
            条，共 {{ total }} 条</span
          >
        </div>
        <el-pagination
          small
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handlePageChange"
        />
      </div>
    </template>
  </el-card>
</template>

<script setup lang="ts">
import { List, View } from '@element-plus/icons-vue'
import { ref } from 'vue'

interface Props {
  data: any[]
  loading: boolean
  total: number
  showOriginLogLevel?: boolean
}

withDefaults<Props>(defineProps<Props>(), { showOriginLogLevel: false })

const emit = defineEmits<{
  (e: 'view-details', row: any): void
  (e: 'page-change', pageNum: number): void
}>()

const pageSize = 50
const currentPage = ref(1)

const getLevelTagType = (level: string) => {
  switch (level) {
    case 'INFO':
      return 'primary'
    case 'WARNING':
      return 'warning'
    case 'ERROR':
      return 'danger'
    default:
      return 'info'
  }
}

const viewDetails = (row: any) => {
  emit('view-details', row)
}

const handlePageChange = (pageNum: number) => {
  currentPage.value = pageNum
  emit('page-change', pageNum)
}
</script>

<style scoped>
.results-card {
  border-radius: 4px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-text {
  margin-left: 8px;
  font-weight: 600;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}

.text-muted {
  color: var(--el-text-color-secondary);
  font-size: 0.875rem;
}
</style>
